<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户外呼</title>
    <link rel="stylesheet" href="/Public/css/gxxjkefu-normalize.css">
    <link href="/Public/css/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="/Public/css/model.css">
    <link rel="stylesheet" href="/Public/css/pager.css">
    <style>
        body {
            font-size: 12px;
        }

        .user_name {
            cursor: pointer;
            color: black;
        }

        .user_name:hover {
            color: #31b0d5;
        }

        .select_div select {
            width: 20%;
            margin: 20px;
            float: right;
        }

        .notice_info {
            padding: 25px 0 3%;
            line-height: 35px;
            color: #979797;
            float: left;
            width: 100%;
            background: #ffffff;
        }

        .feedback_ul {
            text-align: center;
            margin: 0 auto 50px;
        }

        .feedback_ul li {
            text-align: center;
            display: inline-block;
            margin: 0 30px;
        }

        .feedback_ul li a {
            color: black;
            padding: 0 0 10px;
        }

        .feedback_ul .a_active {
            color: #57bee9;
            border-bottom: solid 2px #57bee9;
        }

        .search_table thead {
            background: #f0f8fa;
            border: none;
        }

        .table {
            color: #000000;
            margin: 0 auto;
            width: 100% !important;
            text-align: center;
        }

        .search_table input {
            background: none;
            border: none;
        }

        .table > thead > tr > th {
            border-bottom: none !important;
            text-align: center !important;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            border-top: 1px solid #f0f8fa !important;
            text-align: center !important;
        }

        .remark_div {
            color: black;
            height: 340px;
            width: 90%;
            margin: 200px auto 0;
            position: relative;
        }

        .remark_div input {
            position: absolute;
            right: 0;
            bottom: 0;
            background: #ff815a;
            border-radius: 3px;
            border: none;
            color: white;
            margin-top: 20px;
            width: 200px;
            height: 40px;
        }

        .remark_div textarea {
            background: #f5f5f5;
            border: none;
            padding: 1%;
        }
    </style>
</head>
<body>
<div id="main_C" style="float: left;width: 100%" class="animated fadeInRight">
    <div class="title_info">
        <span>用户外呼</span>
    </div>
    <div class="white_bgColor notice_info">
        <!--顶部选项-->
        <ul class="feedback_ul">
            <li><a href="javascript:void(0);" class="a_active">外呼1</a></li>
            <!--<li><a href="javascript:void(0);" class="a_active">今日需还款</a></li>-->
            <!--<li style="display: none"><a href="javascript:void(0);">明日需还款</a></li>-->
            <!--<li><a href="javascript:void(0);">近期注册未认证</a></li>-->
            <!--<li><a href="javascript:void(0);">近期认证未完成</a></li>-->
            <!--<li><a href="javascript:void(0);">认证未完成</a></li>-->
            <!--<li><a href="javascript:void(0);">未借未借款</a></li>-->
            <li><a href="javascript:void(0);">外呼2</a></li>
            <li><a href="javascript:void(0);">外呼3</a></li>
            <li><a href="javascript:void(0);">外呼4</a></li>
            <li><a href="javascript:void(0);">外呼5</a></li>
            <li><a href="javascript:void(0);">外呼6</a></li>
            <li><a href="javascript:void(0);">外呼7</a></li>
        </ul>
        备注:<input type="text" placeholder="请输入备注" id="mark_content" >
        时间:<input type="text" placeholder="请输入时间" id="starttime" name="end_time">
        批次:<select id="times_pick">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        <a class="page_a_btn"  id="search_button"  onclick="times_search()"  style=" cursor: pointer;
    color: #ffffff !important;
    background-color: #49CFC4;
    border-color: #49CFC4;
    border-radius: 3px;
    padding: 2px 5px;">搜索</a>
        <!--外部外呼1-->
        <div class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>手机号</th>
                    <th>导入时间</th>
                    <th>最近备注</th>
                    <th>备注时间</th>
                    <th>备注人</th>
                    <th>外呼</th>
                </tr>
                </thead>
                <tbody id="t_lst_outer" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="page_div_outer" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page_outer"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>

        <!--外部外呼2-->
        <div class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>

                    <th>手机号</th>
                    <th>导入时间</th>
                    <th>最近备注</th>
                    <th>备注时间</th>
                    <th>备注人</th>
                    <th>外呼</th>
                </tr>
                </thead>
                <tbody id="t_lst_outer1" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="page_div_outer1" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page_outer1"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>

        <!--外部外呼3-->
        <div class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>

                    <th>手机号</th>
                    <th>导入时间</th>
                    <th>最近备注</th>
                    <th>备注时间</th>
                    <th>备注人</th>
                    <th>外呼</th>
                </tr>
                </thead>
                <tbody id="t_lst_outer2" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="page_div_outer2" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page_outer2"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>

        <!--外部外呼4-->
        <div class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>

                    <th>手机号</th>
                    <th>导入时间</th>
                    <th>最近备注</th>
                    <th>备注时间</th>
                    <th>备注人</th>
                    <th>外呼</th>
                </tr>
                </thead>
                <tbody id="t_lst_outer3" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="page_div_outer3" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page_outer3"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>
        <!--外部外呼5-->
        <div class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>

                    <th>手机号</th>
                    <th>导入时间</th>
                    <th>最近备注</th>
                    <th>备注时间</th>
                    <th>备注人</th>
                    <th>外呼</th>
                </tr>
                </thead>
                <tbody id="t_lst_outer4" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="page_div_outer4" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page_outer4"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>
        <!--外部外呼6-->
        <div class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>

                    <th>手机号</th>
                    <th>导入时间</th>
                    <th>最近备注</th>
                    <th>备注时间</th>
                    <th>备注人</th>
                    <th>外呼</th>
                </tr>
                </thead>
                <tbody id="t_lst_outer5" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="page_div_outer5" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page_outer5"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>

        <!--外部外呼7-->
        <div class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>

                    <th>手机号</th>
                    <th>导入时间</th>
                    <th>最近备注</th>
                    <th>备注时间</th>
                    <th>备注人</th>
                    <th>外呼</th>
                </tr>
                </thead>
                <tbody id="t_lst_outer6" class="animated fadeInRight">

                </tbody>
            </table>

            <div id="page_div_outer6" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page_outer6"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
<script src="/Public/js/jquery-3.2.1.js"></script>
<script src="/Public/js/bootstrap.min.js"></script>
<script src="/Public/js/pager.js"></script>
<script src="/Public/js/layer/layer.js"></script>
<script src="/Public/js/layui/layui.js"></script>
<script src="/Public/js/plugins/layer/laydate/laydate.js"></script>

<script>
    // 搜索 姓名，手机号，id
    document.onkeydown = function (event){
        var search=$('#search').val();
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(search!=''){
            if (e && e.keyCode == 13){ // enter 键
                //搜索用户
                var tab_index = parseInt(sessionStorage.getItem('temptask_type'));
                get_data(tab_index+1,1,search);
            }
        }
    };


    function times_search(){
        var date=$('#starttime').val();
        var mark_content=$('#mark_content').val();
        var times_pick=$("#times_pick").find('option:selected').text();
        var index =parseInt(sessionStorage.getItem('temptask_type'));//获取索引

        switch (index+1) {
            case 1://外部外呼
                outer(1, '#page_div_outer', '#page_outer', "t_lst_outer", 1,times_pick,date,mark_content);
                break;
            case 2://外部外呼
                outer(1, '#page_div_outer1', '#page_outer1', "t_lst_outer1", 2,times_pick,date,mark_content);
                break;
            case 3://外部外呼
                outer(1, '#page_div_outer2', '#page_outer2', "t_lst_outer2", 3,times_pick,date,mark_content);
                break;
            case 4://外部外呼
                outer(1, '#page_div_outer3', '#page_outer3', "t_lst_outer3", 4,times_pick,date,mark_content);
                break;
            case 5://外部外呼
                outer(1, '#page_div_outer4', '#page_outer4', "t_lst_outer4", 5,times_pick,date,mark_content);
                break;
            case 6://外部外呼
                outer(1, '#page_div_outer5', '#page_outer5', "t_lst_outer5", 6,times_pick,date,mark_content);
                break;
            case 7://外部外呼
                outer(1, '#page_div_outer6', '#page_outer6', "t_lst_outer6", 7,times_pick,date,mark_content);
                break;
        }

        // console.log(date,times_pick,index+1)
    }


    laydate({
        elem: '#starttime', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus', //响应事件。如果没有传入event，则按照默认的click
        istime: true, //是否开启时间选择
        istoday: true,
        festival: true,
        start: laydate.now(0, "YYYY/MM/DD hh:00:00"),
        format: 'YYYY-MM-DD'
    });
    //拨打电话给用户
    function call_user(mobile) {
        var index = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });
        var url = "<{$SERVER_NAME}>/AntiUser/call";

        layer.alert("确认外呼", {title: '提示框', icon: 3}, function (index) {
            $.post(url, {phone: mobile}, function (data) {
                if (data.code = '1001') {
                    var obj = data.result;
                    if (obj.Succeed == true) {

                    } else {
                        layer.alert(obj.Succeed, {title: '提示框', icon: 2});
                    }
                } else {
                    layer.alert(data.result, {title: '提示框', icon: 2});
                }
                layer.close(index);
            });
            layer.close(index);
        });
        layer.close(index);
    }

    //外部外呼
    function outer(page, page_div, page_id, page_list, type,times='',date='',mark_content='') {

        var url = "<{$SERVER_NAME}>/TempTask/outer";
        // console.log(times_pick,date);
        $.post(url, {page: page, type: type,times:times,date:date,mark:mark_content}, function (data) {
            console.log(data);
            if (data.code == '1001') {
                var obj = data.data;
                var s = "";
                var len = obj.length;
                if (data.count <= 10) {
                    $(page_div).hide();
                } else {
                    $(page_div).show();
                }
                sessionStorage.setItem('temptask_total', data.tol);
                /*分页*/
                Page({
                    num: data.tol,					//页码数
                    startnum: page,				//指定页码
                    elem: $(page_id),		//指定的元素
                    callback: function (n) {	//
                        sessionStorage.setItem('temptask_page', n);
                        outer(n, page_div, page_id, page_list, type,times,date,mark_content);
                    }
                });
                for (var i = 0; i < len; i++) {
                    s += " <tr> " +
                        " <td>" + obj[i].phone + "</td>" +
                        "<td>" + obj[i].ctime + "</td> " +
                        "<td>" + obj[i].content + "</td> " +
                        "<td>" + obj[i].mark_time + "</td> " +
                        "<td>" + obj[i].admin + "</td> " +
                        "</td>" +
                        "<td> <a><input class='remark_btn blue_color' type='button' value='外呼'  onclick=call_user('" + obj[i].mobile + "')  /></a> " +
                        " </tr>";
                }

                document.getElementById(page_list).innerHTML = s;
            } else {

            }
        });

    }

    //end
    /*备注*/
    $(document).ready(function () {
        $(".remark_btn").click(function () {
            $(".remark_div").fadeToggle(500);
        });
    });

    //选项卡切换
    $(document).ready(function () {
        $(".feedback_ul li").click(function () {
            $(".search_table").hide().eq($(this).index()).show();
            $(".feedback_ul").find("li a").removeClass("a_active");
            $(this).children("a").addClass("a_active");

            var index = $(this).index() + 1;//获取索引
            sessionStorage.setItem("temptask_type", index - 1);
            sessionStorage.setItem('temptask_page', 1);
            switch (index) {
                case 1://外部外呼
                    outer(1, '#page_div_outer', '#page_outer', "t_lst_outer", 1);
                    break;
                case 2://外部外呼
                    outer(1, '#page_div_outer1', '#page_outer1', "t_lst_outer1", 2);
                    break;
                case 3://外部外呼
                    outer(1, '#page_div_outer2', '#page_outer2', "t_lst_outer2", 3);
                    break;
                case 4://外部外呼
                    outer(1, '#page_div_outer3', '#page_outer3', "t_lst_outer3", 4);
                    break;
                case 5://外部外呼
                    outer(1, '#page_div_outer4', '#page_outer4', "t_lst_outer4", 5);
                    break;
                case 6://外部外呼
                    outer(1, '#page_div_outer5', '#page_outer5', "t_lst_outer5", 6);
                    break;
                case 7://外部外呼
                    outer(1, '#page_div_outer6', '#page_outer6', "t_lst_outer6", 7);
                    break;
            }
        });
//        //  返回前的页面
        var tab_index = parseInt(sessionStorage.getItem('temptask_type'));
        var page = parseInt(sessionStorage.getItem('temptask_page'));
        var survey_total = parseInt(sessionStorage.getItem('temptask_total'));
        console.log('00000tab_index', tab_index);
        console.log('00000page', page);
        console.log('00000survey_total', survey_total);
        if (tab_index >= 0 || page >= 0) {
            if (tab_index == '' || tab_index == null) {
                tab_index = 0;
            }
            if (page == '' || page == null) {
                page = 1;
            }
            $(".search_table").hide().eq(tab_index).show();
            $(".feedback_ul").find("li a").removeClass("a_active");
            $(".feedback_ul li a").eq(tab_index).addClass("a_active");
            var type_status = $("#type_status").children('option:selected').val();

            switch (tab_index + 1) {
                case 1://外部外呼
                    outer(page, '#page_div_outer', '#page_outer', "t_lst_outer", 1);
                    break;
                case 2://外部外呼
                    outer(page, '#page_div_outer1', '#page_outer1', "t_lst_outer1", 2);
                    break;
                case 3://外部外呼
                    outer(page, '#page_div_outer2', '#page_outer2', "t_lst_outer2", 3);
                    break;
                case 4://外部外呼
                    outer(page, '#page_div_outer3', '#page_outer3', "t_lst_outer3", 4);
                    break;
                case 5://外部外呼
                    outer(page, '#page_div_outer4', '#page_outer4', "t_lst_outer4", 5);
                    break;
                case 6://外部外呼
                    outer(page, '#page_div_outer5', '#page_outer5', "t_lst_outer5", 6);
                    break;
                case 7://外部外呼
                    outer(page, '#page_div_outer6', '#page_outer6', "t_lst_outer6", 7);
                    break;
            }

        } else {
            nocert(1);
        }

    });

    //备注
    function remark(mobile, type) {

//        console.log('7777', mobile);
        layer.open({
            title: '备注',
            type: 2,
            area: ['80%', '70%'],
            maxmin: true,
            offset: '100px',
            content: '<{$SERVER_NAME}>/TempTask/mark.html?mobile=' + mobile + '&type=' + type,
            success: function (layero) {
                layero.find('.layui-layer-min').remove();
            }
        });
    }


</script>

</body>
</html>